<template>
  <div class="department-management">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="部门编号">
        <el-input v-model="searchForm.deptCode" placeholder="请输入部门编号"></el-input>
      </el-form-item>
      <el-form-item label="部门名称">
        <el-input v-model="searchForm.deptName" placeholder="请输入部门名称"></el-input>
      </el-form-item>
      <el-form-item label="上级部门">
        <el-select v-model="searchForm.parentDept" placeholder="请选择">
          <el-option label="知更鸟有限公司" value="ZGJZZDM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门说明">
        <el-input v-model="searchForm.deptDesc" placeholder="请输入部门说明"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人">
        <el-input v-model="searchForm.deptManager" placeholder="请输入负责人"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="searchForm.phone" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="部门状态">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮组 -->
    <div class="operation-buttons">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      <el-button icon="el-icon-edit" @click="handleEdit">编辑</el-button>
      <el-button type="primary" plain @click="handleImport">导入</el-button>
      <el-button type="primary" plain @click="handleExport">导出</el-button>
      <el-button type="success" plain @click="handleApply">启用</el-button>
      <el-button type="danger" plain @click="handleDisable">禁用</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="index"
        label="序号"
        width="60">
      </el-table-column>
      <el-table-column
        prop="deptCode"
        label="部门编码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="deptName"
        label="部门名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="deptOrg"
        label="部门组织"
        width="150">
      </el-table-column>
      <el-table-column
        prop="deptManager"
        label="部门负责人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        width="120">
      </el-table-column>
      <el-table-column
        prop="deptDesc"
        label="部门说明">
      </el-table-column>
      <el-table-column
        prop="status"
        label="部门状态"
        width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
            {{ scope.row.status === '1' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DepartmentManagement',
  data() {
    return {
      searchForm: {
        deptCode: '',
        deptName: '',
        parentDept: '',
        deptDesc: '',
        deptManager: '',
        phone: '',
        status: ''
      },
      tableData: [
        {
          index: 1,
          deptCode: 'ZGJZZDM',
          deptName: '知更鸟有限公司',
          deptOrg: '',
          deptManager: '知更鸟',
          phone: '13700137001',
          deptDesc: '-',
          status: '1'
        },
        {
          index: 2,
          deptCode: 'ZGJBM001',
          deptName: '总办办',
          deptOrg: '知更鸟有限公司',
          deptManager: '曾XXX',
          phone: '13700137002',
          deptDesc: '-',
          status: '1'
        }
        // ... 其他数据
      ],
      currentPage: 1,
      pageSize: 10,
      total: 100,
      selectedRows: []
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
    },
    resetForm() {
      this.searchForm = {
        deptCode: '',
        deptName: '',
        parentDept: '',
        deptDesc: '',
        deptManager: '',
        phone: '',
        status: ''
      }
    },
    handleAdd() {
      // 实现新增逻辑
    },
    handleEdit(row) {
      // 实现编辑逻辑
    },
    handleView(row) {
      // 实现查看逻辑
    },
    handleDelete(row) {
      // 实现删除逻辑
    },
    handleImport() {
      // 实现导入逻辑
    },
    handleExport() {
      // 实现导出逻辑
    },
    handleApply() {
      // 实现启用逻辑
    },
    handleDisable() {
      // 实现禁用逻辑
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.department-management {
  padding: 20px;
}
.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}
.operation-buttons {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
